/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity,
  Animated,
  StatusBar,
  Dimensions,
  Alert,
  Easing,
  Image
} from 'react-native';
import {StackActions,NavigationActions} from 'react-navigation'

import bgImg from '../../access/imgs/bg_login.jpg';
import FontText,{fontFamily} from '../components/FontText';
import {scaleSize} from '../../utils/screen'
import MenuItem from '../components/MenuItem'
import ModelVersion from '../../model/version';
import { Toast,ActivityIndicator } from "antd-mobile-rn";
import {i18n} from '../../i18n/index';
import ProductModel from '../../model/catalog/category';
import SplashScreen from 'react-native-splash-screen'


let product = new ProductModel();
export default class Login extends Component {
  constructor(props){
    super(props);
    this.state = {
        boxScale:new Animated.Value(2),
        loading:false
    }
  }
  componentWillMount(){
    SplashScreen.hide();
    return;
    this.$sqlite.executeSql("ALTER TABLE `category` ADD COLUMN `status` TINYINT(1) NOT NULL DEFAULT '0';",[],(data)=>{
        console.log(data)
      },(err)=>{
        console.log(err);
      });
    this.$http.post("loginDown")
    .then((rdata)=>{
        if(rdata.status){
            this.downFile(rdata.data);
        }else{
            this.setState({
                loading:false
            },()=>{
                Toast.info(rdata.message);
            })
        }
    })
    .catch((e)=>{
        console.log(e);
        this.setState({
            loading:false
        },()=>{
            Toast.info(i18n.t("net.neterror"));
        })
    })
  }
  render() {
    let {loading} = this.state;
    return (
      <View style = {{flex:1}}>
      <View style={styles.container}>
        <View style = {styles.btnBox}>
            <View  style = {styles.storeBox} >
                <FontText style = {styles.storeName} font={"book"}>Store Name</FontText>
            </View>
            <View  style = {styles.userInfo} >
                <FontText style = {styles.userName} font={"light"}>Hi,Chien</FontText>
                <FontText style = {styles.time} font={"light"}>Online Since: 09:03 PM  08/10/2018</FontText>
            </View>
            <View style = {styles.storemenu}>
                <View style = {styles.storeIcon}>
                    <MenuItem style = {{backgroundColor: "rgba(255,255,255,0.2)"}} iconWidth = {56} onPress = {()=>this.table(0)} iconHeight = {57} icon={require("../../access/imgs/table.png")} text={"Table"} />
                </View>
                <View style = {styles.storeIcon}>
                    <MenuItem style = {{backgroundColor: "rgba(255,255,255,0.2)"}} iconWidth = {56} onPress = {()=>this.table(1)} iconHeight = {55} icon={require("../../access/imgs/register.png")} text={"Register"} />
                </View>
                <View style = {styles.storeIcon}>
                    <MenuItem style = {{backgroundColor: "rgba(255,255,255,0.2)"}} iconWidth = {45} onPress = {()=>this.table(2)} iconHeight = {60} icon={require("../../access/imgs/order.png")} text={"Order"} />
                </View>
                <View style = {styles.storeIcon}>
                    <MenuItem style = {{backgroundColor: "rgba(255,255,255,0.2)"}} iconWidth = {60} onPress = {()=>this.table(3)} iconHeight = {55} icon={require("../../access/imgs/cashdrawer.png")} text={"Cash Drawer"} />
                </View>
            </View>
            
            <View style = {styles.mBox}>
                <View style = {styles.storeTips}>
                    <FontText style = {styles.storeTipText} font={"book"}>Store Office</FontText>
                </View>
                <View style = {styles.storemenu}>
                    <View style = {styles.officeIcon}>
                        <MenuItem onPress = {()=>this.menu()} iconWidth = {55} iconHeight = {55} icon={require("../../access/imgs/menu.png")} text={"Menu"} />
                    </View>
                    <View style = {styles.officeIcon}>
                        <MenuItem onPress = {()=>this.report()} iconWidth = {55} iconHeight = {55} icon={require("../../access/imgs/report.png")} text={"Report"} />
                    </View>
                    <View style = {styles.officeIcon}>
                        <MenuItem onPress = {()=>this.rewards()} iconWidth = {44} iconHeight = {65} icon={require("../../access/imgs/reward.png")} text={"Reward"} />
                    </View>
                    <View style = {styles.officeIcon}>
                        <MenuItem onPress = {()=>this.employees()} iconWidth = {55} iconHeight = {55} icon={require("../../access/imgs/employees.png")} text={"Employess"} />
                    </View>
                    <View style = {styles.officeIcon}>
                        <MenuItem iconWidth = {55} iconHeight = {55} icon={require("../../access/imgs/push.png")} text={"Push"} />
                    </View>
                    <View style = {styles.officeIcon}>
                        <MenuItem 
                            iconWidth = {55} 
                            onPress = {()=>this.goPage("settings")}
                            iconHeight = {55} 
                            icon={require("../../access/imgs/setting.png")} text={"Store Setting"} />
                    </View>
                    <View style = {styles.officeIcon}>
                        <MenuItem iconWidth = {60} iconHeight = {60} icon={require("../../access/imgs/inventories.png")} text={"Inventories"} />
                    </View>
                    <View style = {styles.officeIcon}>
                        <MenuItem iconWidth = {60} iconHeight = {60} icon={require("../../access/imgs/cusromers.png")} text={"Customers"} />
                    </View>
                    <View style = {styles.officeIcon}>
                        <MenuItem iconWidth = {60} onPress = {()=>this.selfOrding()} iconHeight = {60} icon={require("../../access/imgs/self.png")} text={"Self Ordering"} />
                    </View>
                </View>
            </View>
        </View>
        <TouchableOpacity
            onPress = {()=>this.exit()}
            activeOpacity = {0.8}
            style = {styles.exitBox}
            >
            <Image style = {styles.exitIcon} source = {require("../../access/imgs/exit.png")} />
        </TouchableOpacity>
        <ActivityIndicator 
            toast
            animating = {loading}
            text = {i18n.t("home.downloading")}
            />
      </View>
    </View>
    );
  }
  exit(){
    console.log('exit!')
  }
  selfOrding(){
    let {navigation} = this.props;
    navigation.navigate("selfording");
  }
  menu(){
    let {navigation} = this.props;
    navigation.navigate("officemenu");
  }

  report(){
    let {navigation} = this.props;
    navigation.navigate("report");
  }

  rewards(){
    let {navigation} = this.props;
    navigation.navigate("officerewards");
  }

  employees() {
    let {navigation} = this.props;
    navigation.navigate("employees");
  }

  table(index){
    let {navigation} = this.props;
    // const resetAction = StackActions.reset({
    //     index: 0,
    //     actions: [
    //         NavigationActions.navigate({routeName: 'store'})
    //     ]
    // });
    // navigation.dispatch(resetAction);
    navigation.navigate("store",{index:index});
  }
  goPage(page){
    let {navigate} = this.props.navigation;
    navigate(page);
  }
  downFile(data){
    let modelVersion = new ModelVersion();
    modelVersion.download(data,(res)=>{
        console.log(res);
        if(res == 1){
            this.setState({
                loading:false
            })
            product.getCategoryProducts()
            .then((d)=>{
                console.log(d);
            })
        }else{
            console.log(res);
        }
    });
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    position: "absolute",
    left:0,
    right:0,
    bottom:0,
    top:0,
    backgroundColor:"#151c2e"
  },
  mBox:{
    borderWidth:1,
    borderColor:"#fff",
    borderRadius:scaleSize(50),
    paddingTop:scaleSize(42),
    paddingLeft:scaleSize(40),
    paddingRight:scaleSize(40),
    marginTop:scaleSize(60)
  },
  bgBox:{
    flex:1,
    width:Dimensions.get('window').width,
    height:Dimensions.get('window').height,
    justifyContent: 'center',
  },
  btnBox:{
      width:scaleSize(1400),
      marginTop: scaleSize(150),
  },
  storeBox:{
    height:scaleSize(100),
    alignItems: 'center',
    justifyContent: 'center',
  },
  storeName:{
      color:"#cfa972",
      fontSize: scaleSize(60),
  },
  storemenu:{
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
  },
  storeIcon:{
    width:scaleSize(685),
    marginTop: scaleSize(30),
  },
  officeIcon:{
    width:scaleSize(420),
    marginBottom: scaleSize(30),
  },
  userInfo:{
    height:scaleSize(150),
    justifyContent: 'center',
    alignItems: 'center',
  },
  userName:{
      color:"#fff",
      fontSize: scaleSize(46),
  },
  time:{
      color:"#fff",
      fontSize: scaleSize(36),
      marginTop: scaleSize(30),
  },
  storeTips:{
      alignItems: 'center',
      justifyContent: 'center',
      position:"absolute",
      left:0,
      right:0,
      top:scaleSize(-20),
  },
  storeTipText:{
      color:"#fff",
      fontSize: scaleSize(36),
      paddingHorizontal: scaleSize(9),
      backgroundColor:"#151c2e"
  },
  exitBox:{
    position: "absolute",
    top:scaleSize(200),
    right:scaleSize(80),
    padding: scaleSize(20),
    top: scaleSize(80),
  },
  exitIcon:{
      width:scaleSize(60),
      height:scaleSize(60)
  }
});
